<template>
<div style="margin-top:20px">
    <!-- 个人信息模块 -->
    <el-row class="hangju">
        <el-col :span="22" :offset="1">
            <div id="box" class="clear">
                <div class="headPortrait">
                    <img src="../assets/title.jpg" alt />
                </div>
                <div class="headPortrait2">
                    <div class="message">
                        <span>张学友</span>
                        <span>(登录名：张学友)</span>
                    </div>
                    <div class="sectionMessage">
                        <span>部门：产品部</span>
                        <span>上次登录：2020-11-21 11:55 (IP 192.168.1.1 四川成都)</span>
                    </div>
                    <div class="sectionMessage">
                        <span>角色：主编</span>
                        <span>登录次数：30次</span>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <!-- 综合统计模块 -->
    <el-row>
        <el-col :span="22" :offset="1">
            <table>
                <tr>
                    <td>
                        <h3 class="biaoti">| 综合统计</h3>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="biaoti2">
                            <span class="wtou">楼盘</span>
                            ：
                            <span>总2334个，</span>
                            <span>今日新增</span>
                            <span class="zongtext">10</span>个
                        </div>
                    </td>
                    <td>
                        <div>
                            <span class="wtou">在线房源</span>
                            ：
                            <span>总34522套，</span>
                            <span>今日新增</span>
                            <span class="zongtext">330</span>套
                        </div>
                    </td>
                    <td>
                        <div>
                            <span class="wtou">活动报名</span>
                            ：
                            <span>总34522人次，</span>
                            <span>今日新增</span>
                            <span class="zongtext">330</span>人次
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="biaoti2">
                            <span class="wtou">团购优惠</span>
                            ：
                            <span>总2334个订单，</span>
                            <span>今日新增</span>
                            <span class="zongtext">10</span>个订单
                        </div>
                    </td>
                    <td>
                        <div>
                            <span class="wtou">房源认购</span>
                            ：
                            <span>总34522个订单，</span>
                            <span>今日新增</span>
                            <span class="zongtext">330</span>个订单
                        </div>
                    </td>
                    <td>
                        <div>
                            <span class="wtou">找房委托</span>
                            ：
                            <span>总34522条，</span>
                            <span>今日新增</span>
                            <span class="zongtext">330</span>条
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="biaoti2">
                            <span class="wtou">测评需求</span>
                            ：
                            <span>总2334个，</span>
                            <span>今日新增</span>
                            <span class="zongtext">10</span>个
                        </div>
                    </td>
                    <td>
                        <div>
                            <span class="wtou">直通车</span>
                            ：
                            <span>总34522人次，</span>
                            <span>今日新增</span>
                            <span class="zongtext">330</span>人次
                        </div>
                    </td>
                    <td>
                        <div>
                            <span class="wtou">注册会员</span>
                            ：
                            <span>总34522人，</span>
                            <span>今日新增</span>
                            <span class="zongtext">330</span>人
                        </div>
                    </td>
                </tr>
            </table>
        </el-col>
    </el-row>
    <!-- 横线 -->
    <el-row>
        <el-col :span="22" :offset="1" class="nei">
            <el-divider></el-divider>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="22" :offset="1" class="colc">
            <div>
                <h3 class="biaoti">
                    | 送审内容
                    <span class="biaoText">(您需要立即处理的送审内容！)</span>
                </h3>

                <el-button type="primary" class="songan">送审楼盘</el-button>
            </div>
            <el-table :data="tableData" class="table" :header-cell-style="{background:'#F3F4F7'}">
                <el-table-column prop="name" label="楼盘名称"></el-table-column>
                <el-table-column prop="class" label="物业类型"></el-table-column>
                <el-table-column prop="area" label="所属区域"></el-table-column>
                <el-table-column prop="time" label="发布时间"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="this.tableData.length" layout="total, sizes, prev, pager, next, jumper" :total="this.tableData.length" :pager-count="5" hide-on-single-page></el-pagination>
            </div>
        </el-col>
    </el-row>

    <!-- 横线 -->
    <el-row>
        <el-col :span="22" :offset="1" class="nei">
            <el-divider></el-divider>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="22" :offset="1" class="colc">
            <div>
                <h3 class="biaoti">
                    | 楼盘排名
                    <span class="biaoText">(结合WEB端、app端综合统计得出的楼盘浏览量排行榜！)</span>
                </h3>

                <el-button type="primary" class="songan">今日排名</el-button>
                <el-button type="primary" class="songan">最近7日</el-button>
                <el-button type="primary" class="songan">最近30日</el-button>
            </div>
            <el-table :data="tableData" class="table" :header-cell-style="{background:'#F3F4F7'}">
                <el-table-column prop="name" label="楼盘名称"></el-table-column>
                <el-table-column prop="class" label="物业类型"></el-table-column>
                <el-table-column prop="area" label="所属区域"></el-table-column>
                <el-table-column prop="time" label="发布时间"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="this.tableData.length" layout="total, sizes, prev, pager, next, jumper" :total="this.tableData.length" :pager-count="5" hide-on-single-page></el-pagination>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="22" :offset="1" class="nei">
            <el-divider></el-divider>
        </el-col>
    </el-row>
</div>
</template>

<script>
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import * as api from "../utils/api";
export default {
    data() {
        return {
            tableData: [{
                    name: "蓝光春天",
                    class: "住宅",
                    area: "高新-大源",
                    time: "2020.10.10",
                },
                {
                    name: "天府国际",
                    class: "住宅",
                    area: "高新-大源",
                    time: "2020.10.10",
                },
                {
                    name: "中粮·观澜祥云",
                    class: "住宅",
                    area: "高新-大源",
                    time: "2020.10.10",
                },
                {
                    name: "怡和新城",
                    class: "住宅",
                    area: "高新-大源",
                    time: "2020.10.10",
                },
            ],
            currentPage4: 5,
        };
    },
    created() {
        // this.chaxun();
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        chaxun() {
            this.axios({
                // url: api.GET_CHAXUN,
                url: "/admin/findAdminByStateAndRoleAndDepAndAcc",
                method: "get",
                params: {
                    admin_account: "000",
                },
            }).then((data) => {
                console.log(data);
            });
        },
    },
};
</script>

<style lang="less">
.el-table td,
.el-table th.is-leaf {
    border-bottom: none;
}

.el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
}

.el-divider {
    background-color: #dcdfe6 !important;
}

.block .el-pagination {
    text-align: center;
}
</style><style lang="less" scoped>
#box {
    width: 100%;
    height: 150px;
}

.headPortrait {
    float: left;
    width: 100px;
    height: 100px;
    margin: 25px 25px;

    img {
        width: 100xp;
        height: 100px;
    }
}

.headPortrait2 {
    float: left;
}

.hangju {
    margin-bottom: 10px;
}

.biaoti {
    margin: 24px 16px;
}

.biaoText {
    margin: 0 0 16px 8px;
    color: #999999;
    font-size: 14px;
    font-weight: normal;
}

.biaoti2 {
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

table {
    width: 100%;
}

.songan {
    margin-left: 16px;
}

.table {
    margin-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.nei {
    padding: 0 16px;
}

.el-col {
    background-color: #fff;
}

.colb {
    //   border: 1px solid red;
    padding: 10px 20px;
}

.wtou {
    display: inline-block;
    width: 80px;
    //   border: 1px solid #000;
    text-align-last: justify;
}

.zongtext {
    color: #0000ff;
}

.el-divider {
    background-color: #000;
    height: 1px;
    margin: 30px auto 0 auto;
}

.message {
    margin-bottom: 20px;
    margin-top: 20px;

    span {
        &:nth-of-type(1) {
            font-size: 24px;
            margin: 20px;
        }
    }
}

.sectionMessage {
    margin-bottom: 10px;

    span {
        &:nth-of-type(1) {
            display: inline-block;
            width: 100px;
            margin: 0 50px 0 20px;
        }
    }
}
</style>
